<template>
	<view class="container">
		<view style="display: flex;align-items: center;">
			<view class="tabbar-item" :class="[item.centerItem ? ' center-item' : '']" :style="'width: calc(100% /' + tabbar.length + ')'"
				@click="changeItem(item)" v-for="(item, i) in tabbar" :key="i">
				<view class="item-top">
					<image :src="props.page&&item.pagePath==props.page?item.selectedIconPath:item.iconPath" />
				</view>
				<view class="item-bottom" :class="props.page&&item.pagePath==props.page?'item-active':''">
					{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps, reactive } from 'vue';
	const props = withDefaults(defineProps<{
		page ?: string,
	}>(), {
	});
	const changeItem = ((e : any) => {
		if (e.id === 1) {
			return;
		}
		uni.switchTab({ url: e.pagePath });
	})

	const tabbar = reactive([{
		pagePath: "/pages/index/index",
		iconPath: "/static/tabs/index.png",
		selectedIconPath: "/static/tabs/index-active.png",
		text: "首页"
	},
	{
		pagePath: "/pages/reward/index",
		iconPath: "/static/tabs/red.png",
		selectedIconPath: "/static/tabs/red-active.png",
		text: "奖励"
	},
	{
		pagePath: "/pages/search/index",
		iconPath: "/static/tabs/search.png",
		selectedIconPath: "/static/tabs/search-active.png",
		text: "搜题",
		centerItem: true
	},
	{
		pagePath: "/pages/question/index",
		iconPath: "/static/tabs/question.png",
		selectedIconPath: "/static/tabs/question-active.png",
		text: "题库"
	}, {
		pagePath: "/pages/user/index",
		iconPath: "/static/tabs/user.png",
		selectedIconPath: "/static/tabs/user-active.png",
		text: "我的"
	}])
</script>

<style lang="scss" scoped>
	$textDefaultColor: #999; // 文字默认颜色
	$bottomBg: #fff; // 底部背景
	$textSelectedColor: #2979ff; // 文字选中颜色
	$centerItemBg: #fff; // 中间凸起按钮背景

	.container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 56px);
		color: $textDefaultColor;
		padding: 5rpx 0;
		background-color: $bottomBg;
		border-top: 1px solid #e3e3e3;
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;

		.item-top {
			flex-shrink: 0;
			width: 65rpx;
			height: 65rpx;
			padding: 4rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.item-bottom {
			width: 100%;
			font-size: 28rpx;
		}

		.item-active {
			color: $textSelectedColor;
		}
	}

	.center-item {
		position: relative;
		height: 100rpx;

		.item-top {
			border-top: 1px solid #e3e3e3;
			position: absolute;
			top: -45rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 50px;
			height: 50px;
			background-color: $centerItemBg;
			border-radius: 50%;
		}

		.item-bottom {
			position: absolute;
			bottom: 5rpx;
		}
	}
</style>